<template>
  <div class="wrapper">
    <div class="top">
      <div class="w">
        <ul>
          <li>
            <span
              v-if="!this.$store.state.user.userName"
              @click="dialogFormVisible = true"
              >登录</span
            >
            <span v-if="this.$store.state.user.userName" @click="open"
              >欢迎{{ this.$store.state.user.userName }}</span
            >
            <span
              v-if="!this.$store.state.user.userName"
              @click="dialogForm = true"
              >注册</span
            >
          </li>
          <li><span @click="$router.push('/order')"> 我的订单</span></li>
          <li><span @click="$router.push('/collect')"> 我的收藏</span></li>
          <li>
            <span @click="$router.push('/shoppingCart')" class="span">
              购物车{{ num }}</span
            >
          </li>
        </ul>
      </div>
    </div>
    <header>
      <div class="w">
        <img src="@/assets/img/logo.c8999c02.png" class="img" />
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          router
          @select="handleSelect"
        >
          <el-menu-item index="1" @click="$router.push('/home')"
            >首页</el-menu-item
          >
          <el-menu-item index="2" @click="$router.push('/goods')"
            >全部商品</el-menu-item
          >
          <el-menu-item index="3" @click="$router.push('/about')"
            >关于我们</el-menu-item
          >
        </el-menu>
        <div class="in">
          <el-input
            placeholder="请输入内容"
            style="width: 280px"
            v-model="search"
            ><el-button
              slot="append"
              class="el-icon-search"
              @click="goSearch"
            ></el-button
          ></el-input>
        </div>
      </div>
    </header>
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="foot">
      <div class="w">
        <p>
          <span><a></a>天无理由退货</span>
          <span><a></a>满99元全场包邮</span>
          <span><a></a>100%品质保证</span>
        </p>
      </div>
      <hr class="hr w" />
      <div class="w">
        <p class="img2">
          <img src="../assets/img/logo.png" alt="" />
        </p>
        <ul>
          <li>
            <span>首页</span>
          </li>
          <li>
            <span>|</span>
          </li>
          <li>
            <span>全部商品</span>
          </li>
          <li>
            <span>|</span>
          </li>
          <li>
            <span>关于我们</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登录弹框 -->
    <el-dialog title="登录" :visible.sync="dialogFormVisible" width="300px">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="userName">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="form.userName"
            autocomplete="off"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-view"
            v-model="form.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add" style="width: 270px"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 注册 -->
    <el-dialog title="注册" :visible.sync="dialogForm" width="300px">
      <el-form :model="form1" :rules="rules" ref="form1">
        <el-form-item prop="userName">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="form1.userName"
            autocomplete="off"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            prefix-icon="el-icon-view"
            v-model="form1.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            type="password"
            prefix-icon="el-icon-view"
            v-model="form1.pwd"
            autocomplete="off"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zhuce('form1')" style="width: 270px"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLogin, getRegister, getCart } from "@/api/user";
export default {
  data() {
    return {
      search: "",
      num: 0,
      // loginText: "",
      showflag: true,
      activeIndex: "",
      //登录
      dialogFormVisible: false,
      form: {
        userName: "",
        password: "",
      },
      form1: {
        userName: "",
        password: "",
        pwd: "",
      },
      formLabelWidth: "40px",
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
        qwd: [{ required: true, message: "两次密码不一致", trigger: "blur" }],
      },
      // 注册
      dialogForm: false,

      list: [],
    };
  },
  mounted() {
    this.getlist();
  },
  watch: {
    "$store.state.showlogin": {
      handler: function (val) {
        if (val) {
          this.dialogFormVisible = true;
          this.$store.commit("editshow");
        }
      },
      immediate: true,
    },
  },
  methods: {
    goSearch() {
      try {
        if (this.search.trim() !== "") {
          this.$router.push({ path: "/goods", query: {search:this.search} });
        }
      } catch (error) {}
    },
    //购物车
    async getlist() {
      const res = await getCart({ user_id: this.$store.getters.userID });
      // console.log(res.data);
      const list = res.data.shoppingCartData;
      // console.log(list);

      list.forEach((item) => {
        this.num += item.num;
      });
    },
    handleSelect() {},
    //点击注册
    zhuce(form1) {
      this.$refs[form1].validate(async (valid) => {
        this.dialogForm = false;
        if (valid) {
          const data = await getRegister(this.form1);
          console.log(data);
          if (data.data.code == "001") {
            this.$message.success(data.data.msg);

            this.$store.commit("push", data.data.user);
          } else {
            this.$message.error(data.data.msg);
          }

          this.form = {};
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //点击欢迎退出
    open() {
      this.$confirm(`退出账号`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.$store.commit("shan");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    // 点击确定
    add() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const data = await getLogin(this.form);
          if (data.data.code == "001") {
            this.$message.success(data.data.msg);

            this.$store.commit("push", data.data.user);
          } else {
            this.$message.error(data.data.msg);
          }
          this.dialogFormVisible = false;
          this.form = {};
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    z-index: 999;
    background-color: #f5f5f5 !important;
  }

  .top {
    width: 100%;
    height: 40px;
    background: #3d3d3d;
    ul {
      display: flex;
      justify-content: flex-end;
    }
    li {
      color: rgb(126, 126, 126);
      margin-left: 50px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    li span:hover {
      color: #fff;
    }
    .span {
      padding: 10px;
      &:hover {
        cursor: pointer;
        color: red;
        background: #fff;
      }
    }
  }
  header {
    height: 95px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    .img {
      margin-top: 20px;
    }
    .w {
      display: flex;
      justify-content: space-between;
    }
    .el-menu {
      margin-top: 32px;
    }
    .in {
      margin-top: 30px;
    }
  }
  .foot {
    margin-top: 20px;
    width: 100%;
    height: 350px;
    background: #3d3d3d;
    p {
      display: flex;
      justify-content: space-between;
      padding-top: 40px;
      span {
        color: #fff;
        font-size: 25px;
        // background: url("../assets/img/ohj.png") no-repeat left 0;
      }
    }
    .hr {
      width: 1200px;
      margin: auto;
      margin-top: 40px;
    }
    .img2 img {
      width: 50px;
      height: 50px;
      margin: 0 auto;
    }
    ul {
      display: flex;
      justify-content: center;

      li {
        color: #ccc;
      }
    }
  }
}
</style>
